<template>
    <div class="about">
        <div id="myCharts"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {},
    computed: {},
    data() {
        return {
            myChart: null
        };
    },
    mounted() {
        this.setEcharts();
        window.addEventListener("resize", this.resize);
    },
    methods: {
        setEcharts() {
            //初始化
            this.myChart = echarts.init(document.getElementById('myCharts'));
            this.myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        },
        resize() {
            //屏幕尺寸改变重置echarts
            if (this.myChart) {
                this.myChart.resize();
            }
        }
    },
    beforeDestroy() {
        //销毁实例
        echarts.dispose(this.myChart);
        this.myChart = null;
    },
    watch: {
        option(val, oldVal) {
            console.log(val, oldVal);
            this.myChart.setOption(val);
        }
    }
};
</script>
<style lang="scss" scoped>
.about {
    width: 100vw;
    height: 50vh;
    #myCharts{
        width: 50%;
        height: 50%;
    }
}
</style>
